<template>
  <view class="con">
    <!-- <view class="bg_balck"></view> -->
    <view class="top">
      <view class="top1 flex flex_between">
        <view class="top1v1">
          <view class="top1v1_1 flex">
            <view class="top1v1_1v1">Good<text>gift</text></view>
            <image @click="showTan_wen()" class="top1v1_1img" src="/static/index/img12.png" mode="widthFix">
            </image>
          </view>
          <view class="top1v1_2">好物有礼</view>
        </view>
        <view class="top1v2 flex" @click="showTan_video">
          <image class="top1v2_img" src="/static/index/img13.png" mode="widthFix"></image>
          <view class="top1v2_v">实操教程</view>
        </view>
      </view>
      <!-- 进度 -->
      <view class="top2">
        <view class="flex flex_between">
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
          <view class="width104">
            <view class="top2li_1"></view>
          </view>
        </view>
        <view class="flex flex_between">
          <view class="top2li_2">选品下单</view>
          <view class="top2li_2">确认收货</view>
          <view class="top2li_2">平台补贴</view>
          <view class="top2li_2">好评有礼</view>
        </view>
      </view>
    </view>
    <!-- 过滤 -->
   <!-- <view class="guolv flex flex_between">
      <view class="guolv_v1">过滤已提取过的产品</view>
      <switch color="#f9bf41" :checked="ed===1" @change="changEd" style="transform:scale(0.5)" />
    </view> -->
    <!-- 列表 -->
    <view class="list">
      <view class="listli" @click="showTan(item)" v-for="(item,index) in butieList">
        <view class="listlit flex flex_between">
          <view class="listlitz">
            <view class="addLijin" v-if="item.att&&item.att!==null"><view>{{item.att}}</view></view>
            <image class="listlitz_img" :src="item.pic"></image>
            <view class="listlitz_2" v-if="item.dian">{{item.dian}}</view>
          </view>
          <view class="listlity shangXiaCenter">
            <view>
              <view class="listlity1 flex flex_between">
                <view class="listlity1z flex flex_between">
                  <view class="listlity1z1 flex">
                    <image class="listlity1z1_img" :src="item.pingtai_ico">
                    </image>
                    <view class="listlity1z1_v">{{item.title}}</view>
                  </view>
                  <!-- <view class="listlity1z2 flex">
                    <image class="listlity1z2_img" src="/static/index/img16.png" mode="heightFix">
                    </image>
                    <view class="listlity1z2_v">{{item.ping_hongbao}}</view>
                  </view> -->
                </view>
              </view>
              <view class="zhen_addqwarap flex flex_between">
                <view class="zhen_addzz" v-if="item.desc">{{item.desc}}</view>
                <!-- <view class="zhen_add" v-if="item.ping_if">{{item.ping_if}}</view> -->
              </view>
              
            </view>
            <view>
              <!-- <view class="listlity3">剩余<text>{{item.kc}}</text>件</view> -->
              <view class="listlity3 flex flex_between">
                <view class="xinzengdeshu">好物赚<text class="listlity1z2_v">{{item.ping_hongbao}}</text></view>
                <view>剩余<text>{{item.kc}}</text>件</view>
              </view>
              <view class="listlity4">
                <!-- 比如总库存60，没人领取的时候，这个轴就是灰色的，领一个黄色的增加点，都被领取了就全黄了：总库存减去剩余库存。除以总库存 -->
                <view class="listlity4cc"><text
                    :style="{width:(Number(item.kc0)-Number(item.kc))/Number(item.kc0)*100+'%'}"></text>
                </view>
                <!-- <view class="listlity4cc"><text :style="{width:item.plan*100+'%'}"></text></view> -->
              </view>
            </view>
          </view>
        </view>
        <view class="listlib flex flex_between">
          <view class="listlib_1 flex">
            <text class="listlib_1_t1">实付{{item.gprice}}</text>
            <text class="listlib_1_t2">补贴{{item.money_butie}}</text>
          </view>
          <view class="listlib_1 flex" v-if="item.money_kefu!=='0' && item.money_kefu!=='0.00'">
            <text class="listlib_1_t1">客返{{item.money_kefu}}</text>
            <text class="listlib_1_t3">{{item.money_pwd}}</text>
          </view>
        </view>
      </view>
    </view>
    <view class="zhezhao" v-if="isShow || isShow_wen ||isShow_video || isBindTan" @click="hideTan"></view>
    <view class="tan" v-if="isShow">
      <view class="zhes_1 flex">
        <image class="zhes_1_img" src="/static/index/img17.png" mode="widthFix"></image>
        <text class="zhes_1_t">好物须知</text>
      </view>
      <view class="zhes_2 flex flex_between">
        <view class="zhes_2li">实付<text>{{selectButieInfo.gprice}}</text></view>
        <view class="zhes_2li">补贴<text>{{selectButieInfo.money_butie}}</text></view>
        <view class="zhes_2li">客返<text>{{selectButieInfo.money_kefu}}</text></view>
        <view class="zhes_2li">红包<text>{{selectButieInfo.ping_hongbao}}</text></view>
      </view>
      <view class="zhes_3">（本商品单账号限购1次，多买无补贴）</view>
      <view class="zhes_4">禁止差评、禁止合并付款、禁止提前确认收货等违规行为，发现讲不予补贴及结算</view>
      <view class="zhes_5Wrap flex flex_between">
        <view class="zhes_51" @click="hideTan2">我再看看</view>
        <view class="zhes_52" @click="hideTan_goDetail(selectButieInfo)">我已知晓</view>
      </view>

    </view>
    <!-- 通用问号弹出 -->
    <view class="tan tan_wen" v-if="isShow_wen">
      <view class="tan_title">关于好物有礼</view>
      <view class="tan_t flex">
        <view class="tan_newli_wrap">
          <view class="tan_newli flex" v-for="(item,index) in butieTip.tips">
            <image class="tan_newli_img" src="/static/index/img19.png" mode="widthFix"></image>
            <view class="tan_newli_v">{{item.content}}</view>
          </view>
        </view>

      </view>
      <view class="tan_b flex flex_between">
        <view class="tan_b_d2" @click="hideTan">我已知晓</view>
      </view>
    </view>
    <!-- 实操课程 -->
    <view class="tan tan_video" v-if="isShow_video">
      <video id="myVideo" :src="butieTip.video"  @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
    </view>
    <!-- 如果未认证弹出 -->
    <view class="tan" v-if="isBindTan">
    	<view class="tan_title">多多认证</view>
    	<view class="tan_t flex">
    		<view class="tan_newli_wrap">
    			<view class="tan_newli flex">
    				<view class="tan_newli_v" style="color: rgba(137,137,137,1); width: 521rpx;">需要先进行多多认证，点击“去认证”，认证授权后就可以参与任务了哦</view>
    			</view>
    		</view>
    
    	</view>
    	<view class="tan_b flex flex_between">
    		<view class="tan_b_d1" @click="isBindTan=false">取消</view>
    		<view class="tan_b_d2" @click="bindPage">去认证</view>
    	</view>
    </view>
  </view>
</template>

<script>
  import {
    getProductTe, //特惠专区
    ProductButieGet, //补贴任务提取
    getProductButieOrder, //补贴任务内容详细
    getOtherTeTips,//特惠专区说明、视频
    productIsBind //是否绑定
  } from '@/request/api.js'
  export default {
    data() {
      return {
        // openid:'oycWz5SBi1rMTuqdQhLy4iSvgHjU',
        openid: uni.getStorageSync('openid'), //获取缓存的openid
        isShow: false,
        isShow_wen: false,
        isShow_video: false,
        myButieList: [], //"我的补贴"列表
        ed: 0, //0未提取，1提取过
        butieList: [], //列表
        selectButieInfo: {}, //当前选择的产品
        oid: '', //补贴任务ID
        butieTip:{}, //补贴专区说明
        isBindTan:false,
        isBind:false,//是否绑定（拼多多是否授权）bind (0未绑定、1已绑定)【未认证、已认证】
        isBindReturnurl:'',
        page:1,//页码
        total:0,//总共的数量
        pagesizes:15//每页数量
      };
    },
    onLoad() {
      // this.getProductButieFun() // 获取补贴专区列表
      // this.getOtherTeTipsFun() // 获取补贴专区说明
    },
    onShow() {
      this.isShow = false
      this.page = 1
      this.butieList = []
      this.getProductButieFun() // 获取补贴专区列表
      this.getOtherTeTipsFun() // 获取补贴专区说明
      this.productIsBindFun() //是否绑定
    },
    onReachBottom() {
      let totolPage =Math.ceil(this.total / this.pagesizes) 
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    methods: {
      // 是否绑定
      productIsBindFun(){
        let that = this
        productIsBind({openid:this.openid}).then(res=>{
          console.log('是否绑定')
          console.log(res)
          if(res.error_code===0){
            that.isBind = res.data.bind
            that.isBindReturnurl = res.data.returnurl
            console.log('that.isBindReturnurl')
            console.log(that.isBindReturnurl)
          }else{
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },
      // 加载更多
      loadMore(){
        this.page = this.page+1
        this.getProductButieFun()
      },
      // 获取补贴专区列表
      getProductButieFun() {
        let param = {
          page:this.page,
          openid: this.openid,
          ed: this.ed
        }
        getProductTe(param).then(res => {
          console.log('获取补贴专区列表')
          console.log(res)
          if (res.error_code === 0) {
            this.total = Number(res.data.total);
            this.pagesizes = Number(res.data.pagesizes);
            let listRe = res.data.arrList
            if(listRe.length>0){
              this.butieList = this.butieList.concat(listRe);
            }
            // this.butieList = res.data.arrList
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      // 获取补贴专区说明
      getOtherTeTipsFun() {
        getOtherTeTips().then(res => {
          console.log('获取补贴专区说明')
          console.log(res)
          if (res.error_code === 0) {
            this.butieTip = res.data
          } else {
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      },

      // 改变是否已提取状态
      changEd(e) {
        console.log(e)
        this.page = 1
        this.butieList = []
        let statu = e.detail.value
        if (statu) {
          this.ed = 1
        } else {
          this.ed = 0
        }
        this.getProductButieFun()
      },

      // 补贴任务提取--先弹弹框
      showTan(item) {
        this.selectButieInfo = item
        // 先判断有没有认证--只限于拼多多
        if(item.pingtai==='2'){
          if(this.isBind){
            this.isShow = true
            console.log('已认证')
          }else{
            this.isBindTan = true
            console.log('未认证')
          }
        }else{
          this.isShow = true
        }
      },
      
      // 跳转认证页面
      bindPage(){
        uni.navigateTo({
          url:'/packageA/mine/bindPage?returnurl='+encodeURIComponent(this.isBindReturnurl)
        })
      },
      showTan_wen() {
        this.isShow_wen = true
      },
      showTan_video() {
        this.isShow_video = true
      },
      hideTan() {
        this.isShow = this.isShow_wen = this.isShow_video = this.isBindTan = false
        // this.getProductButieFun()
      },
      hideTan2() {
        this.isShow = this.isShow_wen = this.isShow_video = this.isBindTan = false
      },
      // 点击"我已知晓"
      hideTan_goDetail(selectButieInfo) {
        let that = this;
        let param = {
          openid: this.openid,
          gid: selectButieInfo.id
        }
        // 1.先判断有没有提取任务,如果已经提取过,就不需要弹框,直接进入详情页;
        // 2.如果没有提取过，再判断：是否已达提取最大数量，如果没有，则弹出框；反之：提示：今日提取数量已用完，无法再提取
        // 如果库存为0提示:当前补贴产品已被抢光了;否则就跳到详情页
        ProductButieGet(param).then(res => {
          console.log('补贴任务提取')
          console.log(res)
          setTimeout(function() {
            that.isShow = false
          }, 500)
          if (res.error_code === 0) {
            this.oid = res.data.id
            setTimeout(function() {
              uni.navigateTo({
                url: '/packageA/index/goodThingsDe?id=' + res.data.id + '&dian=' +selectButieInfo.dian
              })
            }, 100)
          } else if (res.error_code === 1 && res.msg === '已提取过') {
            // 如果已经提取过,之前跳转详情
            this.oid = res.data.id
            // uni.showToast({
            // 	icon: 'none',
            // 	title: res.msg
            // })
            // 已经提取过的可能出现倒计时为负数
            // 1、判断这个账号，有没有提交过订单
            // 2、有提交过订单的情况下，可以进入，隐藏再来一单的按钮
            // 3、没有提过订单，直接提示不能进入
            let params = {
              openid: this.openid,
              oid: this.oid
            }
            getProductButieOrder(params).then(res => {
              console.log('这是什么平台')
              console.log(res.data)
              if (res.error_code === 0) {
                // this.butieOrderInfoById = res.data
                let task_item = res.data.task_item
                if (res.data.surplus_time <= 0) {
                  if (task_item.length === 1 && task_item[0].pic === '') {
                    console.log('没有提交过订单--不能进入详情')
                    if(res.data.pingtai==='2'){
                      console.log('拼多多')
                      setTimeout(function() {
                        uni.navigateTo({
                          url: '/packageA/index/goodThingsDe?id=' + res.data.id + '&dian=' +selectButieInfo.dian
                        })
                      }, 500)
                    }else{
                      uni.showToast({
                        icon: 'none',
                        title: '已超时，失去权益'
                      })
                    }
                    
                  } else {
                    console.log('提交过订单')
                    setTimeout(function() {
                      uni.navigateTo({
                        url: '/packageA/index/goodThingsDe?id=' + res.data.id + '&dian=' +selectButieInfo.dian
                      })
                    }, 500)
                  }
                } else {
                  uni.showToast({
                    icon: 'none',
                    title: '已提取过'
                  })
                  setTimeout(function() {
                    uni.navigateTo({
                      url: '/packageA/index/goodThingsDe?id=' + res.data.id + '&dian=' +selectButieInfo.dian
                    })
                  }, 500)
                }
              } else {
                uni.showToast({
                  icon: 'none',
                  title: res.msg
                })
              }
            })


          } else {
            // 其余的情况：补贴数量剩余不足；已达提取最大数量
            uni.showToast({
              icon: 'none',
              title: res.msg
            })
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .con {
    .top {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      position: relative;
      z-index: 1;
      padding-top: 54rpx;

      .top1 {
        width: 100%;
        height: auto;
        align-items: normal;

        .top1v1 {
          width: 400rpx;
          height: 140rpx;
          border-radius: 0px 100rpx 100rpx 0px;
          background-color: rgba(249, 191, 65, 1);
          padding: 16rpx 30rpx;
          box-sizing: border-box;

          .top1v1_1 {
            .top1v1_1v1 {
              line-height: 58rpx;
              color: rgba(16, 16, 16, 1);
              font-size: 48rpx;
              font-family: 'AvantGardeFont';
              font-weight: bold;
              margin-top: 5rpx;

              text {
                font-weight: 100;
              }
            }

            .top1v1_1img {
              width: 30rpx;
              height: 30rpx;
              position: relative;
              top: -15rpx;
            }
          }

          .top1v1_2 {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
            margin-top: 6rpx;
          }
        }

        .top1v2 {
          width: 220rpx;
          height: 68rpx;
          border-radius: 100rpx;
          background-color: rgba(249, 191, 65, 1);
          justify-content: center;
          margin-right: 30rpx;

          .top1v2_img {
            width: 28rpx;
            height: auto;
            margin-right: 10rpx;
          }

          .top1v2_v {
            color: rgba(0, 0, 0, 1);
            font-size: 28rpx;
          }
        }

      }

      .top2 {
        width: 650rpx;
        height: auto;
        margin: 30rpx;
        box-sizing: border-box;
        border-top: 2rpx solid #d3d3d3;
        padding: 30rpx 0;
        margin-top: 50rpx;
        margin-bottom: 20rpx;

        .top2li_2 {
          color: rgba(0, 0, 0, 1);
          font-size: 28rpx;
          margin-top: -20rpx;
        }

        .top2li_1 {
          width: 16rpx;
          height: 16rpx;
          border-radius: 100%;
          margin: 0 auto;
          position: relative;
          top: -38rpx;
          background-color: rgba(137, 137, 137, 1);
        }

        .width104 {
          width: 104rpx;
        }

        .top2li {
          width: 25%;
          text-align: center;

          .top2li_2.top2li_2_left {
            text-align: left;
          }

          .top2li_2.top2li_2_right {
            text-align: right;
          }
        }
      }
    }

    .guolv {
      width: 100%;
      height: 90rpx;
      border-radius: 20rpx;
      background-color: rgba(255, 255, 255, 1);
      padding: 24rpx 30rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      padding-right: 0;
      z-index: 1;
      position: relative;

      .guolv_v1 {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
      }
    }

    .list {
      width: 100%;
      height: auto;
      position: relative;
      z-index: 1;

      .listli {
        width: 100%;
        height: 334rpx;
        border-radius: 20rpx;
        background-color: rgba(255, 255, 255, 1);
        overflow: hidden;
        padding: 30rpx;
        box-sizing: border-box;
        margin-bottom: 20rpx;

        .listlit {
          width: 100%;
          height: 200rpx;
          align-items: normal;
          position: relative;
          overflow: hidden;

          .listlitz {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
            // overflow: hidden;
            position: relative;
            margin-right: 34rpx;
            .addLijin{
              min-width: 112rpx;
              display: flex;
              height: 36rpx;
              line-height: 36rpx;
              border-radius: 0px 40rpx 40rpx 0px;
              background-color: rgba(0, 0, 0, 1);
              text-align: center;
              position: absolute;
              top: 22rpx;
              left: 0;
              z-index: 9;
              color: rgba(249, 191, 65, 1);
              font-size: 24rpx;
              overflow: hidden;
              align-items: center;
              justify-content: center;
            }
            .listlitz_img {
              width: 200rpx;
              height: 200rpx;
              border-radius: 20rpx;
            }

            .listlity1z1_v {
              width: 300rpx;
            }

            .listlitz_1 {
              position: absolute;
              height: 32rpx;
              border-radius: 0px 40rpx 40rpx 0px;
              background-color: rgba(249, 65, 65, 1);
              display: inline-block;
              color: rgba(255, 255, 255, 1);
              font-size: 24rpx;
              left: 0;
              top: 20rpx;
              line-height: 27rpx;
              padding: 0 10rpx;
            }

            .listlitz_2 {
              width: 100%;
              height: 44rpx;
              line-height: 44rpx;
              border-radius: 0px 0px 16rpx 16rpx;
              background-color: rgba(249,191,65,1);
              color: rgba(0,0,0,1);
              font-size: 24rpx;
              overflow: hidden;
              position: absolute;
              bottom: 0;
              text-align: center;
            }
          }

          .listlity {
            width: 416rpx;
            height: 200rpx;

            .listlity1 {
              width: 100%;
              box-sizing: border-box;

              .listlity1z {
                width: 100%;

                .listlity1z1 {
                  height: 40rpx;
                  width: 100%;
                  .listlity1z1_img {
                    width: 30rpx;
                    height: 30rpx;
                    flex-shrink: 0;
                    border-radius: 100%;
                    margin-right: 10rpx;
                  }

                  .listlity1z1_v {
                    width: 87%;
                    height: 40rpx;
                    line-height: 42rpx;
                    color: rgba(16, 16, 16, 1);
                    font-size: 28rpx;
                    overflow: hidden;
                    white-space: nowrap; /* 确保文本在一行内显示 */
                      overflow: hidden; /* 隐藏溢出的内容 */
                      text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
                  }
                }

                .listlity1z2 {
                  height: 30rpx;
                  line-height: 40rpx;
                  border-radius: 40rpx;
                  background-color: rgba(216, 30, 6, 1);
                  color: rgba(16, 16, 16, 1);
                  font-size: 28rpx;
                  padding: 0 10rpx;
                  padding-right: 20rpx;
                  padding-left: 2rpx;
                  overflow: hidden;

                  .listlity1z2_img {
                    width: auto;
                    height: 30rpx;
                  }

                  
                }
              }

            }
            .listlity1z2_v {
              color: rgba(216,30,6,1);
              font-size:40rpx;
              margin-left: 10rpx;
              font-family: 'AvantGardeFont';
              position: relative;
                  top: 2rpx;
            }
            .listlity2 {
              width: 100%;
              padding-right: 30rpx;
              box-sizing: border-box;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              font-family: 'AvantGardeFont';
              margin-top: 14rpx;

              text {
                font-size: 46rpx;
              }
            }

            .listlity3 {
              width: 100%;
              box-sizing: border-box;
              color: rgba(137, 137, 137, 1);
              font-size: 24rpx;
              width: 100%;
              text-align: right;
              align-items: flex-end;
              text {
                font-family: 'AvantGardeFont';
              }
            }

            .listlity4 {
              width: 100%;
              box-sizing: border-box;

              .listlity4cc {
                width: 100%;
                height: 16rpx;
                border-radius: 20rpx;
                margin-top: 6rpx;
                background-color: rgba(232, 230, 230, 1);
                position: relative;
                overflow: hidden;
              }

              text {
                width: 0;
                height: 16rpx;
                border-radius: 20rpx;
                display: inline-block;
                background-color: rgba(249, 191, 65, 1);
                position: absolute;
                top: 0;
                left: 0;
                ;
              }
            }
          }
        }

        .listlib {
          width: 100%;
          height: auto;
          padding: 30rpx 0;
          padding-bottom: 0;
          box-sizing: border-box;

          .listlib_1 {
            width: 310rpx;
            height: 44rpx;
            // background: #f00;
            line-height: 44rpx;
            border-radius: 40rpx;
            overflow: hidden;

            .listlib_1_t1 {
              background-color: rgba(255,246,228,1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t2 {
              background-color: rgba(238,238,238,1);
              width: 50%;
              color: rgba(16,16,16,1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }

            .listlib_1_t3 {
              background-color: rgba(238,238,238,1);
              width: 50%;
              color: rgba(0, 0, 0, 1);
              font-size: 24rpx;
              height: 44rpx;
              display: block;
              text-align: center;
            }
          }
        }
      }
    }

    .zhes_1 {
      width: 100%;
      height: auto;
      text-align: center;
      margin-bottom: 28rpx;
      justify-content: center;

      .zhes_1_img {
        width: 40rpx;
        height: auto;
        margin-right: 8rpx;
      }

      .zhes_1_t {
        color: rgba(16, 16, 16, 1);
        font-size: 28rpx;
        font-weight: bold;
      }
    }

    .zhes_2 {
      width: 100%;
      height: auto;
      padding: 0 20rpx;
      box-sizing: border-box;
      margin-bottom: 8rpx;

      .zhes_2li {
        color: rgba(0, 0, 0, 1);
        font-size: 28rpx;
        font-weight: bold;

        text {
          font-family: 'AvantGardeFont';
        }
      }
    }

    .zhes_3 {
      height: 32rpx;
      line-height: 32rpx;
      color: rgba(16, 16, 16, 1);
      font-size: 24rpx;
      width: 100%;
      text-align: center;
      margin-bottom: 20rpx;
    }

    .zhes_4 {
      width: 100%;
      height: auto;
      border-radius: 20rpx;
      background-color: rgba(238, 238, 238, 1);
      padding: 20rpx 30rpx;
      color: rgba(249, 65, 65, 1);
      font-size: 24rpx;
      box-sizing: border-box;
      line-height: 40rpx;
      margin-bottom: 48rpx;
    }

    .zhes_5Wrap {
      width: 100%;
      font-size: 28rpx;
      text-align: center;

      .zhes_51 {
        width: 260rpx;
        background-color: rgba(238, 238, 238, 1);
        border-radius: 100rpx;
        height: 72rpx;
        line-height: 72rpx;
      }

      .zhes_52 {
        width: 260rpx;
        background-color: rgba(249, 191, 65, 1);
        border-radius: 100rpx;
        height: 72rpx;
        line-height: 72rpx;
      }
    }

    .tan {
      padding-bottom: 56rpx;
      margin-top: -272rpx;
    }
  }

  .tan_video {
    width: 650rpx;
    height: 1105rpx;
    padding: 0 0;
    margin-left: -325rpx;
  }

  .tan.tan_video {
    margin-top: -552rpx;
  }

  video {
    width: 650rpx;
    height: 1105rpx;
  }
.zhen_addqwarap{
  width: 100%;
  height: 44rpx;
  border-radius: 30rpx;
  overflow: hidden;
  margin-top: 16rpx;
  .zhen_addzz{
    width: 100%;
    height: 44rpx;
    line-height: 44rpx;
    overflow: hidden;
    text-align: center;
    color: rgba(16,16,16,1);
    font-size: 24rpx;
    background-color: rgba(255,246,228,1);
  }
}
  .zhen_add {
   width: 60%;
   height: 44rpx;
   line-height: 44rpx;
   overflow: hidden;
   // border-radius: 10rpx;
   background-color: rgba(238, 238, 238, 1);
   color: rgba(0, 0, 0, 1);
   font-size: 24rpx;
   padding: 0 16rpx;
   box-sizing: border-box;
  }
  .tan_newli_v{
    font-size: 28rpx !important;
  }
  .xinzengdeshu{
    font-family: 'AvantGardeFont';
  }
</style>